import { Button, Input, Space } from 'antd';
import { YmForm } from 'ym-design';

const { FormItem, useForm } = YmForm;

function FormDependencies() {
  const [form] = useForm();
  return (
    <div style={{ maxWidth: '600px' }}>
      <div style={{ marginBottom: '30px' }}>
        <div>
          <p style={{ fontSize: '12px', marginBottom: '10px' }}>
            dependencies: 初始化、 依赖的目标Field执行操作
            'updateVale(onChange)' , 'remove'
            会触发该Field的reRender()[优先级高于该Field.shouldUpdate]{' '}
          </p>
        </div>
      </div>
      <YmForm
        form={form}
        autoComplete="off"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        onFieldsChange={(fields) => {
          console.log('--Form--onFieldsChange---fields:', fields);
        }}
        onValuesChange={(values) => {
          console.log('--Form--onValuesChange---values:', values);
        }}
        onFinish={(values) => {
          console.log('--Form--onFinish---values:', values);
        }}
        onFinishFailed={(errorInfo) => {
          console.log('--Form--onFinishFailed--errorInfo--:', errorInfo);
        }}
      // initialValues={{ name: '1' }}
      >

        {/*  */}
        <FormItem
          name="name"
          label="name"
          initialValue="1"
          rules={[{ required: true, message: '请输入name' }]}
        >
          <Input type="text" placeholder="name" />
        </FormItem>
        <FormItem dependencies={['name']} label="password">
          {(formInstance) => {
            console.log('--name--value--:', formInstance!.getFieldValue('name'));
            return formInstance!.getFieldValue('name') === '1' ? (
              <FormItem name="password" noStyle>
                <Input placeholder="Password" />
              </FormItem>
            ) : null;
          }}
        </FormItem>


        {/* <FormItem dependencies={['name']} noStyle>
          {(formInstance) => {
            console.log(
              '--Field[undefined]--Field[name]value--:',
              form.getFieldValue('name'),
            );
            return formInstance!.getFieldValue('name') === '1' ? (
              <FormItem
                name="password"
                label="password"
                rules={[{ required: true, message: '请输入password' }]}
              >
                <Input placeholder="Password" />
              </FormItem>
            ) : null;
          }}
        </FormItem> */}

        <FormItem wrapperCol={{ offset: 8 }}>
          <Space direction="horizontal">
            <Button htmlType="submit" type="primary">
              Submit
            </Button>
            <Button htmlType="reset">Reset</Button>
          </Space>
        </FormItem>
      </YmForm>
      <div>
        <p style={{ marginBottom: '10px' }}>
          <button
            onClick={() => {
              console.log(
                '--getFieldValue(name)--:',
                form.getFieldValue('name'),
              );
            }}
          >
            getFieldValue('name')
          </button>
          <button
            onClick={() => {
              console.log('--getFieldsValue()--:', form.getFieldsValue());
            }}
          >
            getFieldsValue()
          </button>
          <button
            onClick={() => {
              console.log(
                '--getFieldsValue(all)--:',
                form.getFieldsValue('all'),
              );
            }}
          >
            getFieldsValue(all)
          </button>
        </p>

        <p style={{ marginBottom: '10px' }}>
          <button
            onClick={() => {
              form.setFieldsValue({ name: '123', password: '456', test: 1 });
            }}
          >
            {`setFieldsValue({ name: '123', password: '456', test: 1 })`}{' '}
          </button>
          <button
            onClick={() => {
              form.setFieldValue('name', '1');
            }}
          >
            setFieldValue('name', '1')
          </button>
          <button
            onClick={() => {
              form.setFields([
                { name: 'name', value: '123' },
                { name: 'password', value: '456' },
              ]);
            }}
          >{`setFields([{ name: "name", value: '123' }, { name: 'password', value: '456' }])`}</button>
        </p>

        <p>
          <button
            onClick={() => {
              form.resetFields(['name']);
            }}
          >
            resetFields(['name'])
          </button>
          <button
            onClick={() => {
              form.resetFields();
            }}
          >
            resetFields()
          </button>
        </p>
      </div>
    </div>
  );
}

export default FormDependencies;
